<script setup>
	import {
		navigateToUserInfo,
		navigateToRecharge,
		navigateToSignIn,
		navigateToUpToRecommendCreate,
	} from "@/assets/scripts/navigate.js"

	const props = defineProps({
		userInfo: {
			type: Object,
			default: {}
		},
		isShowSignIn: {
			type: Boolean,
			default: true
		},
		isRecharge: {
			type: Boolean,
			default: true
		},
		isSignIn: {
			type: Boolean,
			default: false
		},
		isShowExchange: {
			type: Boolean,
			default: true
		},
		isShowShare: {
			type: Boolean,
			default: false
		},
		isUserEditAble: {
			type: Boolean,
			default: true
		}
	})

	const emit = defineEmits(['handleSignIn', 'handleExchange'])

	const handleClickEditUser = () => {
		if (!props.isUserEditAble) return
		navigateToUserInfo()
	}
</script>

<template>
	<view class="d-flex d-flex-aic p-normal banner">
		<uv-avatar size='70' class="mr-normal" @click="handleClickEditUser"
			:customStyle="{background:'#fff', padding:'2px'}" :src="props.userInfo.avatar"></uv-avatar>
		<view class="d-flex-fx1" style="color:#fff">
			<view class="d-flex" @click="handleClickEditUser">
				<view class="font-fs20 mr-small">
					{{props.userInfo.nickName}}
				</view>
				<uv-icon name="edit-pen" size="26" v-if="isUserEditAble" @click="handleClickEditUser"
					color="#fff"></uv-icon>
			</view>
			<view class="d-flex font-fs14" style="margin-top: 3px; opacity: 0.8;">
				<view class=" mr-small">
					ID:
				</view>
				<view>
					{{props.userInfo.userId}}
				</view>
			</view>
			<view class="d-flex " style="margin-top: 3px;">
				<view class="mr-normal">
					余额：{{props.userInfo.commemorativeCoin || 0}}缅怀币
				</view>
				<view>
					积分：{{props.userInfo.integral || 0}}
				</view>
			</view>
			<view class="d-flex" style="margin-top: 6px;">
				<uv-button v-if="props.isShowSignIn" type="info" text="签到获得积分" class="mr-small" color="#fff"
					:customStyle="{height:'24px', color:'#F3686D'}" @click="navigateToSignIn"></uv-button>
				<uv-button v-else type="info" :disabled="isSignIn" :text="isSignIn?'已签到':'签到'"
					@click="emit('handleSignIn')" class="mr-small" color="#fff"
					:customStyle="{height:'24px', color:'#F3686D'}"></uv-button>
				<uv-button v-if="props.isShowExchange" @click="emit('handleExchange')" type="info" text="积分兑换缅怀币"
					color="#fff" :customStyle="{height:'24px', color:'#F3686D'}"></uv-button>
				<uv-button v-if="props.isShowShare" @click="navigateToUpToRecommendCreate" type="info" text="推荐获得缅怀币"
					color="#fff" :customStyle="{height:'24px', color:'#F3686D'}"></uv-button>
			</view>
		</view>
		<uv-button class="recharge" v-if="props.isRecharge" @click="navigateToRecharge" type="info" icon="empty-coupon"
			iconColor="#fd3f4e" text="去充值" color="#fff"
			:customStyle="{height:'32px', color:'#fd3f4e', 'border-radius':'16px 0 0 16px'}"></uv-button>
	</view>
</template>

<style lang="scss" scoped>
	.banner {
		background-color: #12b886;
		position: relative;

		.recharge {
			position: absolute;
			top: 15px;
			right: 0;
		}

	}
</style>